<template>
  <div id="PictureList">
    <a-list
      class="picture-list"
      :grid="{ gutter: 16, xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6 }"
      :data-source="dataList"
      :loading="loading"
    >
      <template #renderItem="{ item: picture }">
        <a-list-item>
          <a-card hoverable class="picture-card" @click="handleClick(picture)">
            <!-- 图片 -->
            <template #cover>
              <img :alt="picture.name" :src="picture.url" class="picture-image" loading="lazy" />
            </template>

            <!-- 悬浮层 -->
            <div class="picture-overlay">
              <div class="overlay-content">
                <div class="overlay-title">{{ picture.name }}</div>
                <div class="overlay-tags">
                  <a-tag color="green">{{ picture.category ?? '默认' }}</a-tag>
                  <a-tag v-for="tag in picture.tags" :key="tag">{{ tag }}</a-tag>
                </div>

                <!-- 操作按钮 -->
                <div v-if="showOp" class="overlay-actions">
                  <a-button type="dashed" size="small" @click="(e) => doShare(picture, e)">
                    <ShareAltOutlined />
                  </a-button>
                  <a-button type="dashed" size="small" @click="(e) => doSearch(picture, e)">
                    <SearchOutlined />
                  </a-button>
                  <a-button type="primary" v-if="canEdit" size="small" @click="doEdit(picture, $event)">
                    <FormOutlined />
                  </a-button>
                  <a-button danger size="small" v-if="canDelete" @click="doDelete(picture, $event)">
                    <DeleteOutlined />
                  </a-button>
                </div>

              </div>
            </div>
          </a-card>
        </a-list-item>
      </template>
    </a-list>
    <ShareModal ref="shareModalRef" :link="shareLink" />

  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { FormOutlined, DeleteOutlined,SearchOutlined,ShareAltOutlined } from '@ant-design/icons-vue'
import { deletePictureUsingPost } from '@/api/pictureController.ts'
import { message } from 'ant-design-vue'
import ShareModal from '@/components/ShareModal.vue'
import { ref } from 'vue'


// 分享弹窗引用
const shareModalRef = ref()
// 分享链接
const shareLink = ref<string>()

// 分享
const doShare = (picture: API.PictureVO, e: Event) => {
  e.stopPropagation()
  shareLink.value = `${window.location.protocol}//${window.location.host}/picture/${picture.id}`
  if (shareModalRef.value) {
    shareModalRef.value.openModal()
  }
}

// 搜索
const doSearch = (picture, e) => {
  e.stopPropagation()
  window.open(`/search_picture?pictureId=${picture.id}`)
}

interface Props {
  dataList?: API.PictureVO[]
  loading?: boolean
  showOp?: boolean
  onReload?: () => void
  canEdit?: boolean
  canDelete?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  dataList: () => [],
  loading: false,
  showOp: false,
  canEdit: false,
  canDelete: false,
})


const router = useRouter()

// 编辑图片
const doEdit = (picture, e) => {
  e.stopPropagation() // 防止点击事件传递到父级
  console.log('编辑图片 ID:', picture.id)
  router.push({
    path: '/add_picture',
    query: {
      id: picture.id,
      spaceId: picture.spaceId,
    },
  })
}

// 删除图片
const doDelete = async (picture, e) => {
  e.stopPropagation()
  console.log('删除图片 ID:', picture.id)
  const res = await deletePictureUsingPost({ id: picture.id })
  if (res.data.code === 0) {
    message.success('删除成功')
    props?.onReload()
  } else {
    message.error('删除失败')
  }
}

const handleClick = (picture) => {
  router.push(`/picture/${picture.id}`)
}
</script>

<style scoped>
/* 统一卡片样式 */
.picture-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  width: 110%;
}

.picture-card:hover {
  width: 110%;
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* 图片样式 */
.picture-image {
  width: 110%;
  height: 240px;
  object-fit: cover;
  transition: transform 0.3s ease-in-out;
}

.picture-card:hover .picture-image {
  transform: scale(1.1);
}

/* 悬浮层 */
.picture-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 110%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  display: flex;
  align-items: flex-end;
}

.picture-card:hover .picture-overlay {
  opacity: 1;
}

/* 文字 & 标签 */
.overlay-content {
  width: 100%;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.overlay-title {
  font-size: 18px;
  font-weight: bold;
}

.overlay-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.overlay-tags .ant-tag {
  background: rgba(255, 255, 255, 0.3);
  border: none;
  color: white;
}

/* 按钮样式 */
.overlay-actions {
  display: flex;
  justify-content: space-between;
}

.overlay-actions .ant-btn {
  border-radius: 8px;
  transition: all 0.2s;
}

.overlay-actions .ant-btn:hover {
  transform: scale(1.1);
}

/* 新增样式 */
.overlay-actions {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  gap: 8px; /* 按钮间距 */
  padding: 8px 0;
  width: 100%;
}

.action-btn {
  flex: 1 0 auto; /* 允许伸缩但保持最小宽度 */
  min-width: 80px; /* 设置最小宽度防止过小 */
  padding: 0 8px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-text {
  margin-left: 4px;
  font-size: 12px;
}

/* 穿透修改 Ant Design 按钮样式 */
::v-deep(.ant-btn-sm) {
  padding: 0 8px;
  font-size: 12px;
  line-height: 22px;
}
</style>
